<template>
  <div class="containers">
    <el-header>
      <header-vue></header-vue>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <el-menu
          style="width: 100%;box-sizing: border-box;"
          :default-active="activeIndex"
          class="el-menu-vertical-demo el-menu"
          @select="handleSelect"
          background-color="#fff"
          text-color="black"
          active-text-color="rgb(49,148,185)">
          <ul class="rules2">
            <li class="ruleitem" v-for="(item,index) in sidebarData">
              <el-menu-item :index = index.toString()>
                <i class="fa fa-sitemap fa-icon-styles" :class="IconData[index]"></i>
                <span slot="title">{{item.description}}</span>
              </el-menu-item>
            </li>
          </ul>

        </el-menu>
      </el-aside>
      <el-main>
        <template v-if="side == 1">
         <unitSetting></unitSetting>
        </template>
        <template v-if="side == 2">
          <templateList></templateList>
        </template>
        <template v-if="side == 3">
          <fileManagementList></fileManagementList>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import {$aos} from "../../store/state";
  import headerVue from '../common/HeaderVue';
  import updatePwd from './auditInfo/auditInfo';
  import personalInfo from './PersonalInfo/personalInfo';
  import unitSettings from './UnitSettings/unitManage';
  import userManagement from './templateSettings/userManagement';
  import unitSetting from './UnitSettings/unit_list'
  import templateList from  './templateSettings/template_list'
  import fileManagementList from './fileManagement/fileManagementList'

  export default {
    name: "containerDetail",
    data() {
      return {
        activeIndex: '1',
        side:'1',
        sidebarData:[],
        IconData:[],
      }
    },
    created(){
      $aos.getItem('sideNum').then(res => {
            this.activeIndex = res ? res : '0';
        $aos.getItem('loginData').then(res => {
          this.roleType = res.role.roleType;
          this.sidebarData = res.role.dirRightList;
          if(this.roleType === 0){
            this.IconData = ['fa-sitemap','fa-houzz','fa-eercast','fa-envelope-open-o','el-icon-upload','el-icon-edit-outline']
          }else if(this.roleType === 5){
            this.IconData = ['fa-houzz','fa-eercast','fa-envelope-open-o']
          }else if (this.roleType === 4){
            this.IconData = ['fa-eercast','fa-envelope-open-o']
          }
        })
      })
      this.side = this.$route.query.index.toString();
    },
    methods: {
      handleSelect(key) {
        $aos.setItem('sideNum',key)
        this.$router.push({path:'/container',})
      }
    },
    components: {
      headerVue,
      updatePwd,
      personalInfo,
      unitSettings,
      userManagement,
      unitSetting,
      templateList,
      fileManagementList
    },
  }
</script>

<style scoped>
  .containers {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #fff;
  }

  .el-header {
    background: rgb(48, 48, 70);
    height: 65px !important;
    padding: 0 !important;
  }

  .el-aside {
    background: #fff;
    height: 97%;
    padding-bottom: 3%;
    border-right: 1px solid #ccc;
  }

  .el-container {
    height: 100%;
  }

  .el-menu {
    border: 0;
  }

  .el-main {
    height: 100%;
    background: #ecf0f5;
    position: relative;
  }

  .systemTitle {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 30px;
    color: rgba(221, 221, 221, 0.22);
    transform: translate(-50%, -50%);
  }

  .fa-icon-styles {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle
  }
  ul,li{
    margin: 0;
    padding: 0;
  }

  .ruleitem {
    list-style: none;
  }

</style>
